<template>
  <div class="question-detail-container">
    <el-card v-if="question" class="question-detail-card">
      <template #header>
        <div class="card-header">
          <div class="title-row">
            <el-tag :type="getQuestionTypeTag(question.type)" class="question-type-tag">
              {{ formatQuestionType(question.type) }}
            </el-tag>
            <span class="question-score">{{ question.score }} 分</span>
          </div>
          <div class="meta-row">
            <span class="difficulty-label">难度：</span>
            <el-rate
              v-model="question.difficulty"
              disabled
              text-color="#ff9900"
              score-template="{value}"
            />
            <span class="knowledge-point" v-if="question.knowledgePoint">
              知识点：{{ question.knowledgePoint }}
            </span>
          </div>
        </div>
      </template>
      
      <div class="question-content-section">
        <h3>试题内容</h3>
        <div class="question-content">{{ question.content }}</div>
      </div>
      
      <div v-if="question.options && question.options.length > 0" class="question-options-section">
        <h3>选项</h3>
        <el-divider />
        <ul class="options-list">
          <li v-for="(option, index) in question.options" :key="index" class="option-item">
            <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
            <div class="option-text">{{ option }}</div>
          </li>
        </ul>
      </div>
      
      <div class="question-answer-section">
        <h3>正确答案</h3>
        <el-divider />
        <div v-if="question.type === 'MULTIPLE_CHOICE' || question.type === 'TRUE_FALSE'">
          <el-tag 
            v-for="answer in question.answers" 
            :key="answer" 
            type="success" 
            class="answer-tag"
          >
            {{ answer }}
          </el-tag>
        </div>
        <div v-else-if="question.type === 'FILL_BLANK'">
          <div v-for="(answer, index) in question.answers" :key="index" class="fill-blank-answer">
            {{ index + 1 }}. {{ answer }}
          </div>
        </div>
        <div v-else-if="question.type === 'SHORT_ANSWER'">
          <div class="short-answer-content">
            <pre>{{ question.answers.join('\n') }}</pre>
          </div>
        </div>
      </div>
      
      <div v-if="question.explanation" class="question-explanation-section">
        <h3>答案解析</h3>
        <el-divider />
        <div class="explanation-content">{{ question.explanation }}</div>
      </div>
      
      <div class="question-footer">
        <div class="creator-info" v-if="question.creatorId">
          创建者：{{ question.creatorId }}
        </div>
        <div class="time-info">
          <div v-if="question.createTime">创建时间：{{ formatDateTime(question.createTime) }}</div>
          <div v-if="question.updateTime">更新时间：{{ formatDateTime(question.updateTime) }}</div>
        </div>
      </div>
    </el-card>
    
    <el-empty v-else description="试题加载中或不存在" />
    
    <div class="back-link">
      <router-link to="/questions">
        <el-button plain>
          <el-icon><ArrowLeft /></el-icon>
          返回试题列表
        </el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: 'QuestionDetail',
  components: {
    ArrowLeft
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const store = useStore()
    
    // 试题详情相关数据
    const question = computed(() => store.getters.currentQuestion)
    const canManage = computed(() => store.getters.canManageQuestions)
    
    // 获取试题详情
    const fetchQuestionDetail = async () => {
      const result = await store.dispatch('fetchQuestionDetail', props.id)
      
      if (!result || !result.success) {
        ElMessage.error(result?.message || '获取试题详情失败')
      }
    }
    
    // 初始化
    onMounted(() => {
      fetchQuestionDetail()
    })
    
    // 格式化试题类型
    const formatQuestionType = (type) => {
      const typeMap = {
        'MULTIPLE_CHOICE': '选择题',
        'TRUE_FALSE': '判断题',
        'FILL_BLANK': '填空题',
        'SHORT_ANSWER': '简答题'
      }
      return typeMap[type] || type
    }
    
    // 获取试题类型标签样式
    const getQuestionTypeTag = (type) => {
      const tagMap = {
        'MULTIPLE_CHOICE': 'primary',
        'TRUE_FALSE': 'success',
        'FILL_BLANK': 'warning',
        'SHORT_ANSWER': 'info'
      }
      return tagMap[type] || ''
    }
    
    // 格式化日期时间
    const formatDateTime = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
    }
    
    return {
      question,
      canManage,
      formatQuestionType,
      getQuestionTypeTag,
      formatDateTime
    }
  }
}
</script>

<style scoped>
.question-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.question-detail-card {
  margin-bottom: 20px;
}

.card-header {
  margin-bottom: 20px;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.question-type-tag {
  font-size: 0.9rem;
}

.question-score {
  font-size: 1.1rem;
  font-weight: bold;
  color: #f56c6c;
}

.meta-row {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 0.9rem;
}

.difficulty-label {
  margin-right: 5px;
}

.knowledge-point {
  margin-left: 20px;
}

.question-content-section,
.question-options-section,
.question-answer-section,
.question-explanation-section {
  margin-bottom: 30px;
}

.question-content-section h3,
.question-options-section h3,
.question-answer-section h3,
.question-explanation-section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.question-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #303133;
  margin-bottom: 15px;
  white-space: pre-line;
}

.options-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.option-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.option-label {
  font-weight: bold;
  color: #409EFF;
  margin-right: 8px;
  flex-shrink: 0;
  min-width: 20px;
}

.option-text {
  flex: 1;
  line-height: 1.5;
}

.answer-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.fill-blank-answer {
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
  margin-bottom: 10px;
  color: #67c23a;
  font-size: 1rem;
}

.short-answer-content {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-line;
  line-height: 1.6;
  color: #303133;
}

.explanation-content {
  padding: 15px;
  background-color: #fdf6ec;
  border-radius: 4px;
  line-height: 1.6;
  color: #e6a23c;
  white-space: pre-line;
}

.question-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 0.9rem;
}

.time-info div {
  margin-bottom: 5px;
}

.back-link {
  margin-top: 20px;
}
</style> 